<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="layui-v2.5.5/layui/layui.all.js"></script>
    <script src="layui-v2.5.5/layui/css/layui.css"></script>
    <style>
        .layout {
            width: 375px;
            height: 667px;
            margin: 50px auto;
            border: solid gray 0px;
        }
        button[type='button'] {
            position: relative;
            left: 12%;
            width: 270px;
            height: 50px;
        }
        img {
            position: absolute;
            left: 33.5%;
            top: -16%;
        }
        form {
            width: 100%;
        }
        div.col-sm-9 {
            margin: auto 11%;
        }

    </style>
</head>
<body>
<div class="layout">
    <img src="pic/logo.png" alt="">
    <br><br><br><br><br><br> <br><br><br><br><br><br>
    <form class="form-horizontal">

        <div class="form-group has-success has-feedback">
            <div class="col-sm-9">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>

                    <input name="pphone" type="text" class="form-control" id="pphone" aria-describedby="inputGroupSuccess2Status" placeholder="请输入手机号">


                </div>

                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>

                <span id="inputGroupSuccess2Status1" class="sr-only">(success)</span>

            </div>
        </div>
    </form>
    <button type="button" class="btn btn-success" onclick="sendPhone()">获取验证码</button><br><br>
    <input  name="code" type="text" class="form-control" id="code" aria-describedby="inputGroupSuccess2Status" placeholder="请输入验证码" style="display: none" ><br>
    <button type="button" id="sub" class="btn btn-success" onclick="sendCode()">提交</button>

</div>
</body>

<script>
    function sendPhone() {


        $("#code").attr("style", "display: block")
        $.ajax({
            url: "/people/findPhoneNumber",
            data: {"pphone": $("#pphone").val()},
            type:"get",
            success: function (data) {
                if (data == '500') {
                    layer.msg("此号码未被注册,重新输入")
                } else {
                    layer.msg("发送成功")

                }
            }
        })
    }
    function  sendCode() {

        $.ajax({
            url: "/people/findCode",
            data: {"pphone": $("#pphone").val(),"pcode":$("#code").val()},
            type:"get",
            success: function (data) {
                if (data == '500') {
                    layer.msg("验证码错误")
                } else {
                    layer.msg("挂号成功")
                    show();
                }
            }
        })
    }
    var timeout = 5;

    function show() {

        var showbox = $(".showbox");
        showbox.html(timeout);
        timeout--;
        if (timeout == 0) {
            window.opener = null;

            window.location.href = "index.html";
        } else {
            setTimeout("show()", 1000);
        }
    }
</script>
</html>